@mixin absolute-position($top: 0, $right: 0, $bottom: 0, $left: 0){
  position: absolute;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

@mixin absolute-fit {
  width: auto;
  height: auto;
//overflow: hidden;
  @include absolute-position;
}

@mixin box(){
  display: -webkit-box;
}

@mixin box-align($align: stretch){
  -webkit-box-align: $align;
}

@mixin box-orient($orient: horizontal){
  -webkit-box-orient: $orient;
}

@mixin box-orient-important($orient: horizontal){
  -webkit-box-orient: $orient !important;
}

@mixin box-pack($pack: start){
  -webkit-box-pack: $pack;
}

@mixin box-flex($flex: 1){
  -webkit-box-flex: $flex;
}

@mixin sencha-layout {
  html, body {
    width: 100%;
    height: 100%;
  }

  @-webkit-keyframes x-paint-monitor-helper {
    from { zoom: 1 }
    to { zoom: 1 }
  }

  .x-paint-monitored {
    position: relative;
  }

  .x-paint-monitor {
    width: 0 !important;
    height: 0 !important;
    visibility: hidden;
    &.cssanimation {
      -webkit-animation-duration: 0.0001ms;
      -webkit-animation-name: x-paint-monitor-helper;
    }
    &.overflowchange {
      overflow: hidden;
      &::after {
        content: "";
        display: block;
        width: 1px !important;
        height: 1px !important;
      }
    }
  }

  .x-size-monitored {
    position:relative;
  }

  .x-size-monitors {
    position:absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    overflow: hidden;
    > * {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    &.scroll > * {
      &.shrink::after {
        content: "";
        display: block;
        width: 200%;
        height: 200%;
        min-width: 1px;
        min-height: 1px;
      }
      &.expand::after {
        content: "";
        display: block;
        width: 100000px;
        height: 100000px;
      }
    }
    &.overflowchanged > * {
      &.shrink {
        > * {
          width: 100%;
          height: 100%;
        }
      }
      &.expand {
        > * {
          width: 200%;
          height: 200%;
        }
      }
    }
  }

  .x-body {
    position: relative;
    z-index: 0;
  }

  .x-inner, .x-body {
    width: 100%;
    height: 100%;
  }

  .x-dock, .x-dock-body {
    height: 100%;
  }

  .x-sized {
    position: relative;
  }

  .x-stretched.x-container {
    @include box;
    @include box-orient(vertical);
    > .x-inner, > .x-body, > .x-body > .x-inner {
      @include box();
      @include box-flex(1);
      @include box-orient(vertical);
    }
  }

  .x-innerhtml {
    width: 100%;
  }

  .x-layout-card {
    position: relative;
    overflow: hidden;
  }

  .x-layout-card-item-container {
    @include absolute-fit;
  }

  .x-layout-card-item {
    @include absolute-position;
  }

  .x-layout-newcard-item, .x-layout-newcard-item > * {
    @include absolute-position;
  }

  .x-layout-newcard-item:not(.active) {
    display: none;
  }

  .x-layout-fit.x-stretched > .x-layout-fit-item {
    @include box();
    @include box-flex(1);
  }

  .x-layout-fit {
    position: relative;
  }

  .x-layout-fit-item {
    &.x-sized {
      @include absolute-position;
    }
    &.x-unsized {
      width: 100%;
      height: 100%;
    }
  }

  .x-center, .x-centered {
    @include absolute-position;
    @include box;
    @include box-align(center);
    @include box-pack(center);
    > * {
      position: relative;
    }
    > .x-floating {
      position: relative !important;
    }
  }

  .x-floating {
    position: absolute;
  }

  .x-dock {
    @include box();
    &.x-sized, &.x-sized > .x-dock-body > *,
    &.x-sized > .x-dock-body > .x-body > .x-inner {
      @include absolute-fit();
    }
    .x-dock-body {
      @include box();
      @include box-flex(1);
    }
    &.x-sized > .x-dock-body {
      position: relative;
    }
    &.x-unsized, &.x-stretched {
      > .x-dock-body {
        @include box-orient(vertical);
        > * {
          @include box-flex(1);
        }
      }
    }
    &.x-dock-vertical {
      @include box-orient(vertical);
    }
    &.x-dock-horizontal {
      @include box-orient(horizontal);
      > .x-dock-item {
        @include box();
        &.x-sized {
          > .x-inner, > .x-body {
            @include absolute-fit();
          }
        }
        &.x-unsized {
          @include box-orient(vertical);
          > * {
            @include box-flex(1);
          }
        }
      }
    }
  }
  //.x-dock {
  //  display: table;
  //  width: 100%;
  //  height: 100%;
  //  &.x-dock-vertical {
  //    > * {
  //      display: table-row;
  //    }
  //    > .x-dock-item {
  //      height: 1px;
  //    }
  //    &.x-sized > .x-dock-body {
  //      > .x-body, > .x-inner, > .x-body > .x-inner {
  //        width: 100%;
  //        height: 100%;
  //      }
  //    }
  //  }
  //  &.x-dock-horizontal {
  //    > * {
  //      display: table-cell;
  //      vertical-align: top;
  //      height: 100%;
  //      position: relative;
  //    }
  //    > .x-dock-item {
  //      width: 1px;
  //    }
  //    > .x-dock-item > *, > .x-dock-body > * {
  //      height: 100%;
  //    }
  //    &.x-sized > .x-dock-body {
  //      > .x-body, > .x-inner, > .x-body > .x-inner {
  //        width: 100%;
  //        height: 100%;
  //      }
  //    }
  //  }
  //}

  .x-layout-box {
    @include box;
    &.x-horizontal {
      @include box-orient-important(horizontal);
      > .x-layout-box-item.x-flexed {
        width: 0 !important;
      }
    }
    &.x-vertical {
      @include box-orient(vertical);
      > .x-layout-box-item.x-flexed {
        height: 0 !important;
      }
    }
    > .x-layout-box-item {
      display: -webkit-box !important;
    }
    &.x-align-start {
      @include box-align(start);
    }
    &.x-align-center {
      @include box-align(center);
    }
    &.x-align-end {
      @include box-align(end);
    }
    &.x-align-stretch {
      @include box-align(stretch);
    }
    &.x-pack-start {
      @include box-pack(start);
    }
    &.x-pack-center {
      @include box-pack(center);
    }
    &.x-pack-end {
      @include box-pack(end);
    }
    &.x-pack-justify {
      @include box-pack(justify);
    }
  }

  .x-layout-box-item.x-sized {
    > .x-inner, > .x-body, > .x-dock-outer {
      @include absolute-fit;
    }
  }

  .x-layout-float {
    overflow: hidden;
    > .x-layout-float-item {
      float: left;
    }
    &.x-direction-right {
      > .x-layout-float-item {
        float: right;
      }
    }
  }

  .x-table-inner {
    display: table !important;
    width: 100% !important;
    height: 100% !important;

    &.x-fixed-layout {
      table-layout: fixed !important;
    }
  }

  .x-table-row {
    display: table-row !important;
  }

  .x-table-cell {
    display: table-cell !important;
    vertical-align: middle;
  }

  .x-translatable {
      position: absolute;
      top: 100% !important;
      left: 100% !important;
      overflow: visible !important;
      z-index: 1;
      &::before {
          content: "";
          display: block;
          position: absolute;
          top: 100%;
          left: 100%;
          width: 100%;
          height: 100%;
          visibility: hidden;
      }
  }

  .x-translatable-container {
      overflow: hidden;
      @include absolute-fit();
      &::before {
          content: "";
          display: block;
          width: 300%;
          height: 300%;
          visibility: hidden;
      }
  }

  .x-size-change-detector {
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .x-size-change-detector > * {
    visibility: hidden;
  }

  .x-size-change-detector-shrink > * {
    width: 200%;
    height: 200%;
  }

  .x-size-change-detector-expand > * {
    width: 100000px;
    height: 100000px;
  }

  .x-scroll-view {
    position: relative;
    display: block;
    overflow: hidden;
  }

  .x-scroll-container {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .x-scroll-scroller {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    width: auto !important;
    height: auto !important;
  }

  .x-ios .x-scroll-scroller {
    -webkit-transform: translate3d(0, 0, 0);
  }

  .x-scroll-stretcher {
    position: absolute;
    visibility: hidden;
  }

  .x-scroll-bar-grid-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .x-scroll-bar-grid {
    display: table;
    width: 100%;
    height: 100%;

    > * {
      display: table-row;
    }

    > * > * {
      display: table-cell;
    }

    > :first-child > :first-child {
      width: 100%;
      height: 100%;
    }

    > :first-child > :nth-child(2) {
      padding: 3px 3px 0 0;
    }

    > :nth-child(2) > :first-child {
      padding: 0 0 3px 3px;
    }
  }

  .x-scroll-bar {
    position: relative;
    overflow: hidden;
  }

  .x-scroll-bar-stretcher {
    position: absolute;
    visibility: hidden;
    width: 100%;
    height: 100%;
  }

  .x-scroll-bar-x {
    width: 100%;

    > .x-scroll-bar-stretcher {
      width: 300%;
    }

    &.active {
      height: 6px;
    }
  }

  .x-scroll-bar-y {
    height: 100%;

    > .x-scroll-bar-stretcher {
      height: 300%;
    }

    &.active {
      width: 6px;
    }
  }

  .x-scroll-indicator {
    background: #333;
    position: absolute;
    z-index: 3;
    opacity: 0.5;
  }

  .x-android-4 .x-scroll-indicator {
    opacity: 1;
  }

  .x-scroll-indicator.default {
    @include border-top-radius(3px);
    @include border-bottom-radius(3px);
  }

  .x-list-light,
  .x-dataview-light {
    .x-scroll-indicator {
      background: #fff;
      opacity: 1;
    }
  }

  .x-scroll-indicator-x {
    height: 100%;
  }

  .x-scroll-indicator-y {
    width: 100%;
  }

  .x-scroll-indicator-light {
    background: #eee;
  }

  .x-scroll-indicator.csstransform {
    background: none;

    > * {
      position: absolute;
      background-color: #333;
    }

    > :nth-child(2) {
      -webkit-transform-origin: 0% 0%;
      background: none;
      content: url();
    }

    &.x-scroll-indicator-light {
      > * {
        background-color: #eee;
      }

      > :nth-child(2) {
        content: url();
      }
    }

    &.x-scroll-indicator-y {
      > * {
        width: 100%;
      }

      > :first-child {
        height: 3px;
        @include border-top-radius(3px);
      }

      > :nth-child(2) {
        height: 1px;
      }

      > :last-child {
        height: 3px;
        @include border-bottom-radius(3px);
      }
    }

    &.x-scroll-indicator-x {
      > * {
        height: 100%;
      }

      > :first-child {
        width: 3px;
        @include border-left-radius(3px);
      }

      > :nth-child(2) {
        width: 1px;
      }
      > :last-child {
        width: 3px;
        @include border-right-radius(3px);
      }
    }
  }
}
